<template>
  <div>
    <h1>我的表格</h1>
    <el-table
      :data="data"
      style="width: 100%"
      @selection-change="change"
    >
      >
      <el-table-column
        type="selection"
        width="55"
      >
      </el-table-column>
      <el-table-column
        v-if="index"
        type="index"
        label="序号"
        width="50"
      >
      </el-table-column>
      <template v-for="item in column">
        <el-table-column
          v-if="item.type === 'function'"
          :key="item.prop"
          :prop="item.prop"
          :label="item.label"
        >
          <template #default="{ row }">
            <!-- <el-input v-model="row.type" size="mini" clearable></el-input> -->
            <span>{{ item.callback && item.callback(row) }}</span>
          </template>
        </el-table-column>
        <el-table-column
          v-else-if="item.type === 'slot'"
          :key="item.prop"
          :prop="item.prop"
          :label="item.label"
          :width="item.width"
        >
          <template #default="{ row }">
            <slot v-if="item.name === 'operation'" name="operation" :prop="row">
              <span>这是插槽</span>
            </slot>
            <slot v-if="item.name === 'input'" name="input" :prop="row">
              <span>这是插槽</span>
            </slot>
          </template>
        </el-table-column>
        <el-table-column
          v-else
          :key="item.prop"
          :prop="item.prop"
          :label="item.label"
          :width="item.width"
        >
        </el-table-column>
      </template>
    </el-table>
  </div>
</template>

<script>
export default {
  name: 'MyTable',
  props: {
    data: {
      type: Array,
      default: () => []
    },
    column: {
      type: Array,
      default: () => []
    },
    index: {
      type: Boolean,
      default: false
    }
    // width: {
    //   type: Number,
    //   default: 200
    // }
  },
  methods: {
    change(val) {
      this.$emit('selectionChange', val)
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
